<template>
	<div class="adviser-dialogue-panel" v-resize="handerResize">
		<!--头部-->
		<dialog-header></dialog-header>
		<div class="body-module-wrap">
			<div class="expand-btn" :class="{'show-client': showClientList}" @click="toggleShowClientList">
				<svg-icon iconClass="arrow-right2" class="icon" :class="{rotate: !showClientList}"></svg-icon>
			</div>
			<!--聊天对话框-->
			<dialog-body ref="dialogBody"></dialog-body>
			<!--聊天客户列表-->
			<chat-client-list v-show="showClientList"></chat-client-list>
		</div>
		<!--底部-->
		<dialog-footer @scrollToBottom="scrollToBottom" :showRightBtnBar="showRightBtnBar"></dialog-footer>
	</div>
</template>

<script>
import DialogHeader from '@/components/lm-chat/adviser-dialogue-panel/dialog-header.vue'
import ChatClientList from '@/components/lm-chat/adviser-dialogue-panel/chat-client-list.vue'
import DialogBody from '@/components/lm-chat/adviser-dialogue-panel/dialog-body.vue'
import DialogFooter from '@/components/lm-chat/adviser-dialogue-panel/dialog-footer.vue'
import { mapState, mapMutations } from "vuex"
export default {
	name: 'AdviserDialoguePanel',
	components: {
		DialogHeader,
		DialogBody,
		ChatClientList,
		DialogFooter,
	},
	data() {
		return {
			showRightBtnBar: true
		}
	},
	computed: {
		...mapState('lm-chat', ['showClientList'])
	},
	methods: {
		...mapMutations('lm-chat', ['toggleShowClientList']),
		scrollToBottom() {
			this.$refs.dialogBody.scrollToBottom()
		},
		// 元素尺寸变化处理
		handerResize(width, height) {
			if(width < 750) {
				this.showRightBtnBar = false
			} else {
				this.showRightBtnBar = true
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.adviser-dialogue-panel{
	flex: 1;
	height: 100%;
	position: relative;
	.body-module-wrap{
		height: calc(100% - 272px);
		position: relative;
		.expand-btn{
			position: absolute;
			top: 20px;
			background: #F7F7F7;
			border-radius: 4px;
			width: 18px;
			right: 20px;
			z-index: 100;
			&.show-client{
				right: 284px;
			}
			.icon{
				width: 18px;
				height: 28px;
				&.rotate{
					transform: rotate(180deg);
				}
			}
		}
	}
}
</style>